// 1、导入 React 第三方包
import React from 'react';
import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));

// JSX的使用介绍
const h1 = <h1>Hello React JSX</h1>;

const div = (
  // 声明的 JSX 结构必须要有一个根节点
  // 可以使用html标签，也可以使用 <></>，或者 <React.Fragment></React.Fragment>
  <div>
    <div>
      <h2>购物列表</h2>
      {/* 所有标签都要闭合 */}
      <br />
      <hr />
      <ul>
        <li>华为</li>
        <li>iPhone</li>
      </ul>
    </div>
    <div>xxx</div>
  </div>
);

// 定义数据
const name = 'Jack';
const age = 18;
const likes = ['吃饭', '睡觉', '敲代码'];
const obj = {
  name: 'Rose',
  age: 18,
};
const func = () => {
  return 123;
};
const h2 = <h2>JSX元素{age}</h2>;
const imgSrc =
  'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png';

// 定义UI
const el = (
  <div>
    <h1>{name}</h1>
    <h1>{age}</h1>
    <h1>{likes.join('=>')}</h1>
    <h1>{obj.name}</h1>
    <h1>{obj.age}</h1>
    <h1>{age > 18 ? '出去浪' : '好好学习'}</h1>
    <h1>{func()}</h1>
    {h2}
    <img src={imgSrc} alt="我是一个logo"></img>
  </div>
);

root.render(el);
